vue使用antd design
参考：https://www.cnblogs.com/LUA123/p/11170657.html1.安装：npm install ant-design-vue --save2.在main.js中 a.全部引入import ant from \'ant-design-vue\'import \'ant-design-vue/dist/antd.less\'Vue.use(ant) b.按需引入 import {Button} from \'ant-design-vue\'import \'ant-des...
2024-01-10
ant-design-vue？
如下，使用a-tootlip封装了一个r-tooltip组件<template> <a-tooltip :placement="pos" overlay-class-name="tip-text-box" v-bind="$attrs" v-on="$listeners" > <slot /> <template v-for="(_, nam...
2024-03-09
ant design vue登录问题
我本地运行是可以登录进去的但是发布到服务器后登录就不行了是不是要调用官方的登录接口，是的话哪位大哥可以教一下是在哪调吗，或者是其他什么问题？实在弄不好了回答开发中详见webpack相关的设置。...
2024-01-10
ant design 日期格式化的实现
今天写项目的时候用到ant design中的日期组件，但是由于用ant design日期组件取得的值是moment类型，而往数据库中保存需要的是字符串类型.这里就用到了moment日期转换第一种写法我取得的值是年月如：201806第二种写法moment().format('YYYY-MM-DD')第三种写法moment(Date.now()).format('YYYY-MM-DD')获取本地日期...
2024-01-10
ant design 日期格式化的实现
今天写项目的时候用到ant design中的日期组件，但是由于用ant design日期组件取得的值是moment类型，而往数据库中保存需要的是字符串类型.这里就用到了moment日期转换第一种写法我取得的值是年月如：201806第二种写法moment().format('YYYY-MM-DD')第三种写法moment(Date.now()).format('YYYY-MM-DD')获取本地日期...
2024-01-10
ant-design-vue纯前端分页
由于项目需求需要采取前端分页方式，最后找到解决方式<a-table size="default" bordered :columns="columns" :dataSource="dataSource" :loading="loading" :pagination="false" > ...此处省略部分代码</a-table><a-pagination size="middle" ...
2024-01-10
ant design vue 如何实现照片墙？
请求后端之后，后端会返回一个列表我想实现把图片都显示出来，像上图中一样，一行可以有多个图片ant design vue 有什么组件可以快速实现这一点我想到的是，通过 a-row 和 a-col 和 span 实现，但是这样写出来的代码又臭又长，不忍直视<div v-for="(item, index) in responseData" :key="index"> <div class="c...
2024-02-12
【React】ant design表单清空数据
如图所示 ，现在的需求是我点击保存按钮添加这些信息成功之后自动清空表单input文本框的内容方便我添加下一条信息表单文本框的值 是通过 getFieldDecorator提交的<FormItem {...formItemLayout} label="XXX" >{getFieldDecorator('clearPort', {rules: [{ required: true, message: '请填写XXX！',whitespace:true}],})(<Input />)}</FormItem>求助...
2024-01-10
Ant Design的Table组件去除
在Ant Design的Table组件文档中，排序有三种状态：点击升序、点击降序、取消排序。一般需求只需要升序和降序，不需要取消排序，这时候就需要我们设置sortOrder来去除取消排序。首先，我们从官方文档中ctrl+c出一个排序栗子，放在我们的组件中。官方栗子import React, { useEffect, useState } from 'react';import...
2024-01-10
Ant Design的Table组件去除
在Ant Design的Table组件文档中，排序有三种状态：点击升序、点击降序、取消排序。一般需求只需要升序和降序，不需要取消排序，这时候就需要我们设置sortOrder来去除取消排序。首先，我们从官方文档中ctrl+c出一个排序栗子，放在我们的组件中。官方栗子import React, { useEffect, useState } from 'react';import...
2024-01-10
关于ant-design-vue的一些坑
ant-design-vue中的一些坑使用ant-design-vue的一些吐槽最近一个前端项目ui要使用ant-design-vue，说干就干。首先打开ant-design-vue官网，点开layout选项，看了全部没看到相关示例代码，就在最下面看到相关API有相关代码示例。照着上面代码编写之后发现报错了，没有找到相关控件，what’s the fuck?，示例也有错...
2024-01-10
ant design vue 表格和国际化的使用
官方文档： https://www.antdv.com/components/table-cn/#在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。如果你的数据没有这个属性，务必使用 rowKey 来指定数据列的主键。若没有指定，控制台会出现缺少 key 的提示，表格组件也会出现各类...
2024-01-10
基于ant design日期控件使用_仅月份的操作
总体效果：展开后：选值后：代码部分：1、引入：import { DatePicker } from 'antd';2、主体部分：export default class PersonInfo extends Component{ constructor() { super(); //设置状态，存储日期 this.state = { workMode: ['month', 'month'], workValue: [], }; } render(){ //主体引...
2024-01-10
ant design vue导航菜单与路由配置操作
此功能包含：1.根据动态路由自动展开与自动选择对应路由所在页面菜单2.只展开一个子菜单3.兄弟组件控制菜单与路由<a-menu:openKeys="openKeys":selectedKeys="selectedKeys"mode="inline"theme="dark":inlineCollapsed="$store.state.isCollapse"@click='select'@openChange='openChange'><a-sub-menu v-for="item in menu" :key=...
2024-01-10
基于ant design日期控件使用_仅月份的操作
总体效果：展开后：选值后：代码部分：1、引入：import { DatePicker } from 'antd';2、主体部分：export default class PersonInfo extends Component{ constructor() { super(); //设置状态，存储日期 this.state = { workMode: ['month', 'month'], workValue: [], }; } render(){ //主体引...
2024-01-10
ant-design-vue 快速避坑指南(推荐)
ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目。本文主要目的是总结一些开发过程中比较耗时间去查找，文档中...
2024-01-10
ant design vue 日期选择器只选择年份
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"> <a-form-model-item label="年度/季度" > <a-date-picker mode="year" placeholder="请选择年份" format='YYYY' ...
2024-01-10
ant design vue导航菜单与路由配置操作
此功能包含：1.根据动态路由自动展开与自动选择对应路由所在页面菜单2.只展开一个子菜单3.兄弟组件控制菜单与路由<a-menu:openKeys="openKeys":selectedKeys="selectedKeys"mode="inline"theme="dark":inlineCollapsed="$store.state.isCollapse"@click='select'@openChange='openChange'><a-sub-menu v-for="item in menu" :key=...
2024-01-10
antd-design-pro里 ?. 是什么语法
回答ES2020 的 Optional chaining（可选链）语法，目前主流浏览器还不支持，需要 babel 或 tsc 转译。let len = selectedRowsState?.length;// 等效于let len = (selectedRowsState !== undefined && selectedRowsState !== null) ? selectedRowsState.length : undefined;// 如果用布尔短路的话，近似于let len = !!s...
2024-01-10
ant design pro中可控的筛选和排序实例
我就废话不多说了，大家还是直接看代码吧~/** * Created by hao.cheng on 2017/4/15. */import React from 'react';import { Table, Button } from 'antd';const data = [{ key: '1', name: '张三', age: 22, address: '浙江省温州市',}, { key: '2', name: '李四', age: 42, address: '湖南省湘潭市',}, ...
2024-01-10
nuxt按需引入ant design vue UI组件
在网络上看了很多ui组件按需加载的案例，但是那不是我想要的1. 首先我们看一下 错误的示范！！1.1.配置插件 plugins\antd-ui.js import Vue from 'vue' import Button from 'ant-design-vue/lib/button' import Steps from 'ant-design-vue/lib/steps' import Form from 'ant-design-vue/lib/form' import Input fro...
2024-01-10
Ant design vue中的联动选择取消操作
项目中会遇到需求就是table表格中选中在侧边展示，侧边删除，table中选中取消的联动选中ui框架：Ant design vue组件：table 和 taghtml中<template v-for="tag in dataType"> <!-- key不能使用index --> <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag.id)">{{tag.title}}</a-tag></template><a-table ...
2024-01-10
7点助你ant-design-vue快速避坑上手
ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目。本文主要目的是总结一些开发过程中比较耗时间去查找，文档中没...
2024-01-10
ant design vue中表格组件的数据全部默认选中
一进来到这个表格,里面的的数据要全部默认选中,而且新添加的内容,也要全部选中回答在dataSorde这个数据源对象里面添加一个selectedRowKeys，即selectedRowKeys: []。然后在你获取后台数据的代码那里，给selectedRowKeys赋值。比如你查到100条数据，this.selectedRowKeys = [...Array(100).keys()]。每次获取table数据后，执行下...
2024-01-10
antd design table更改某行数据的样式操作
antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string-->返回类型是String类型。例子：import styless from './component/record.css';--->引入css样式。css:.csbsTypes{ font-family:微软雅黑, "Open Sans", "宋体"; font-weight: bold; }代码：<Table title={()=><div style={{textA...
2024-01-10
